
import { lazy, Suspense } from 'react'
import { Navigate } from 'react-router-dom'
import { Spin } from 'antd'

var Index = lazy(() => import('../views/Index'))
var Login = lazy(() => import('../views/Login'))
var Register = lazy(() => import('../views/Register'))
var NotFound = lazy(() => import('../views/NotFound'))

var Home = lazy(() => import('../views/Index/Home'));
var Service = lazy(() => import('../views/Index/Service'));
var Staff = lazy(() => import('../views/Index/Staff'));
var Custom = lazy(() => import('../views/Index/Custom'));
var System = lazy(() => import('../views/Index/System'));

var StaffManage = lazy(() => import('../views/Index/Staff/StaffManage'));
var RoleManage = lazy(() => import('../views/Index/Staff/RoleManage'));
var CustomManage = lazy(() => import('../views/Index/Custom/CustomManage'));
var HistoryData = lazy(() => import('../views/Index/System/HistoryData'));
var RealtimeData = lazy(() => import('../views/Index/System/RealtimeData'));

const AuthComponent = ({children,permission_no}) => {
    // 如果当前token删除，说明登录过期，则应该去登录
    // 如果当前路由的权限编号，在用户所属角色的权限中，则可以访问该路由，否则不能访问
    var token = localStorage.getItem('token');
    var userinfo = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : {}

    // 需要权限验证，并且有权限
    // 不需要权限验证
    var res = permission_no &&
        userinfo.role &&
        userinfo.role.permissions &&
        userinfo.role.permissions.includes(permission_no) ||
        !permission_no

    if (token) { //存在token
        if (res) { //需要权限验证并且有权限访问 或则 不需要权限验证
            return <Suspense fallback={<div className="example"><Spin /></div>}>
                    {children}
                    </Suspense>
        } else {
            return <Suspense fallback={<div className="example"><Spin /></div>}>
                        <NotFound />
                    </Suspense>
        }
    } else {
        return  <Suspense fallback={<div className="example"><Spin /></div>}>
                   <Navigate to="/login" />
                </Suspense>
    }
}
//配置路由表 并导出
export default [
    {
        path: '/index',
        //element: <Lazyload> <Index /> </Lazyload> ,
        element: <AuthComponent permission_no={1}> <Index /></AuthComponent>,
        children: [
            {
                path: '/index/home',
                element: <AuthComponent permission_no={11}> <Home /> </AuthComponent>
            },
            {
                path: '/index/service',
                element: <AuthComponent permission_no={12}> <Service /></AuthComponent>
            },
            {
                path: '/index/staff',
                element: <AuthComponent permission_no={13}> <Staff /></AuthComponent>,
                children: [
                    {
                        path: '/index/staff/staffManage',
                        element: <AuthComponent permission_no={131}> <StaffManage /></AuthComponent>
                    },
                    {
                        path: '/index/staff/roleManage',
                        element: <AuthComponent permission_no={132}> <RoleManage /></AuthComponent>
                    },
                    {
                        path: '/index/staff',
                        element: <AuthComponent> <Navigate to="/index/staff/staffManage" /></AuthComponent>
                    },
                    {
                        path: '*',
                        element: <AuthComponent> <NotFound /></AuthComponent>
                    },
                ]
            },
            {
                path: '/index/custom',
                element: <AuthComponent permission_no={14}> <Custom /></AuthComponent>,
                children: [
                    {
                        path: '/index/custom/custommanage',
                        element: <AuthComponent permission_no={141}> <CustomManage /></AuthComponent>
                    },
                    {
                        path: '/index/custom',
                        element: <AuthComponent> <Navigate to="/index/custom/custommanage" /></AuthComponent>
                    },
                    {
                        path: '*',
                        element: <AuthComponent> <NotFound /></AuthComponent>
                    },
                ]
            },
            {
                path: '/index/system',
                element: <AuthComponent permission_no={15}> <System /></AuthComponent>,
                children: [
                    {
                        path: '/index/system/realtimedata',
                        element: <AuthComponent permission_no={151}> <RealtimeData /></AuthComponent>
                    },
                    {
                        path: '/index/system/historydata',
                        element: <AuthComponent permission_no={152}> <HistoryData /></AuthComponent>
                    },
                    {
                        path: '/index/system',
                        element: <AuthComponent> <Navigate to="/index/system/realtimedata" /></AuthComponent>
                    },
                    {
                        path: '*',
                        element: <AuthComponent> <NotFound /></AuthComponent>
                    },
                ]
            },
            {
                path: '/index',
                element: <AuthComponent> <Navigate to="/index/home" /></AuthComponent>
            },
            {
                path: '*',
                element: <AuthComponent> <NotFound /></AuthComponent>
            },

        ]
    },
    {
        path: '/login',
        element:  <Login />
    },
    {
        path: '/register',
        element:  <Register />
    },
    {
        path: '/',
        element: <AuthComponent> <Navigate to="/index" /></AuthComponent>
    },
    {
        path: '*',
        element: <AuthComponent> <NotFound /></AuthComponent>
    },
]